{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button type="warning" size="small" @click="onGet('{:url('updateCache')}')">更新缓存</el-button>
			<el-button type="primary" size="small" @click="add">添加菜单</el-button>
			<el-select v-model="navsType" placeholder="请选择">
			    <el-option label="后台菜单" value="admin"></el-option>
			    <el-option label="会员中心菜单" value="member"></el-option>
			</el-select>
		</el-col>
	</el-row>

	<el-table
		:default-expand-all="false"
		border
	    :data="tableData"
	    style="width: 100%">
	    <el-table-column type="expand">
	      <template slot-scope="props">
	        <el-table
	        	v-if="props.row.children"
				stripe
			    :data="props.row.children"
			    border
			    style="width: 100%;margin-bottom: 20px;">
		    	    </el-table-column>
			    	<el-table-column
		    	        prop="id"
		    	        label="ID"
		    	        align="center"
		    	        width="50"
		    	        >
		    	    </el-table-column>
		    	    <el-table-column
		    	        prop="title"
		    	        label="菜单名称"
		    	        align="center"
		    	        >
		    	    </el-table-column>
		    	    <el-table-column
		    	        prop="name"
		    	        label="Name"
		    	        align="center"
		    	        >
		    	    </el-table-column>
		    	    <el-table-column
		    	      label="参数"
		    	      align="center"
		    	      prop="params">
		    	    </el-table-column>
		    	    <!-- <el-table-column
		    	        prop="icon"
		    	        label="Icon"
		    	        align="center"
		    	        > -->
		    	    </el-table-column>
		    	    <el-table-column
		    	        label="状态"
		    	        align="center"
		    	        :width="60"
		    	        >
		    	        <template slot-scope="c">
		    	        	<span v-if="c.row.status" style="color: #666;">
		    	        		显示
		    	        	</span>
		    	        	<span v-else style="color: #666;">
		    	        		隐藏
		    	        	</span>
		    	        </template>
		    	    </el-table-column>
		    	    <el-table-column label="操作">
		    	    	<template slot-scope="c">
		    	    		<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+c.row.id,true)">删除</el-button>
		    	    		<el-button type="success" size="mini" class="ws-mini" v-if="!c.row.status" @click="close(c.row)">显示</el-button>
		    	    		<el-button type="warning" size="mini" class="ws-mini" v-if="c.row.status" @click="close(c.row)">隐藏</el-button>
							<el-button type="success" size="mini" class="ws-mini" @click="edit(c.row)">编辑</el-button>

		    	    		<el-button type="warning" size="mini" class="ws-mini" v-if="c.$index>0" icon="el-icon-arrow-up" @click="upRecord(props,c,true)"></el-button>

		    	    		<el-button type="warning" size="mini" class="ws-mini" v-if="" icon="el-icon-arrow-down" @click="downRecord(props,c,true)"></el-button>
		    	    	</template>
		    	    </el-table-column>
		    </el-table>
	      </template>
	    </el-table-column>
	    <el-table-column
	      label="ID"
	      prop="id"
	      :width="80"
	      align="center">
	    </el-table-column>
	    <el-table-column
	      label="菜单名称"
	      prop="title">
	    </el-table-column>
	    <el-table-column
	      label="Name"
	      prop="name">
	    </el-table-column>
	    <el-table-column
	      label="参数"
	      align="center"
	      prop="params">
	    </el-table-column>
	    <!-- <el-table-column
	      label="Icon"
	      prop="icon"> -->
	    </el-table-column>
	    <el-table-column
	        label="子集"
	        align="center"
	        :width="60"
	        >
	        <template slot-scope="c">
	        	<span v-if="c.row.children" style="color: #666;">
	        		{{c.row.children.length}}
	        	</span>
	        	<span v-else style="color: #666;">
	        		0
	        	</span>
	        	
	        </template>
	    </el-table-column>
	    <el-table-column
	        label="状态"
	        align="center"
	        :width="60"
	        >
	        <template slot-scope="c">
	        	<span v-if="c.row.status" style="color: #666;">
	        		显示
	        	</span>
	        	<span v-else style="color: #666;">
	        		隐藏
	        	</span>
	        </template>
	    </el-table-column>
	    
	    <el-table-column label="操作" width="450">
	    	<template slot-scope="c">
	    		<el-button type="danger" size="mini" @click="onGet('{:url(\'del\')}?id='+c.row.id,true)">删除</el-button>
	    		<el-button type="success" size="mini" v-if="!c.row.status" @click="close(c.row)">显示</el-button>
	    		<el-button type="warning" size="mini" v-if="c.row.status" @click="close(c.row)">隐藏</el-button>
				<el-button type="success" size="mini" @click="edit(c.row)">编辑</el-button>
				<el-button type="success" size="mini" @click="addChildren(c.row.id)">添加子集</el-button>

	    		<el-button type="warning" size="mini" v-if="c.$index>0" icon="el-icon-arrow-up" @click="upRecord(tableData,c)"></el-button>

	    		<el-button type="warning" size="mini" v-if="c.$index<tableData.length-1" icon="el-icon-arrow-down" @click="downRecord(tableData,c)"></el-button>
	    	</template>
	    </el-table-column>
	</el-table>

	<!-- 添加菜单 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="父级">
				<el-select v-model="data.pid">
					<el-option
					  label="顶级菜单"
					  :value="0">
					</el-option>
				    <el-option
				      v-for="item in tableData"
				      :key="item.id"
				      :label="item.title"
				      :value="item.id">
				    </el-option>
				  </el-select>
			</el-form-item>
			<el-form-item label="菜单名称" prop="title">
				<el-input v-model="data.title" placeholder="菜单名称"></el-input>
			</el-form-item>
			<el-form-item label="Name" prop="name">
				<el-input type="text" v-model="data.name" placeholder="例：index/index/index"></el-input>
			</el-form-item>
			<el-form-item label="参数">
				<el-input type="text" v-model="data.params" placeholder="例：id=18&status=1"></el-input>
			</el-form-item>
			<!-- <el-form-item label="Icon">
				<el-input type="text" v-model="data.icon" placeholder="图标"></el-input>
			</el-form-item> -->
			<el-form-item label="状态">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">隐藏</el-radio>
				    <el-radio :label="1">显示</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加菜单 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list|raw}, // 列表数据
		navsType:"{$type}", // 当前菜单类型
		addVisible:false, //添加菜单框
		dialogTitle:'添加菜单',
		data:{}, // 添加、编辑数据
		rules:{
			title:[
				{required: true, message:'请输入菜单名称'},
			],
			name:[
				{required: true, message:'请输入Name属性'},
			],
		},
	},
	watch:{
		navsType(newVal){
			location.href="{:url('')}?type="+this.navsType;
		}
	},
	created(){
		this.emptyData();
	},
	methods:{
		rowStyle(){
			return {'background-color':'#eee'}
		},
		emptyData(newData={}){
			this.data=Object.assign({
				pid:0,
				title:'',
				name:'',
				status:1,
				icon:'',
				params:'',
				type:this.navsType,
			},newData);
		},
		showDialog(isShow=true){
			this.addVisible=isShow;
		},
		// 上移
		upRecord(){

		},
		// 下移
		downRecord(){

		},
		// 添加子集
		addChildren(pid=0){
			this.add({pid});
		},
		// 新增
		add(data){
			this.dialogTitle='菜单添加';
			this.emptyData(data);
			this.showDialog();
		},
		// 编辑
		edit(row){
			this.dialogTitle='菜单编辑';
			this.emptyData(row);
			this.showDialog();
		},
		// 隐藏、启用菜单
		close(row){
			this.onGet("{:url('close')}?id="+row.id+'&type='+this.navsType,false,res=>{
				if(res.code){
					row.status=Math.abs(row.status-1);
				}
			},false);
		},
		// 上下移动
		upRecord(navs,c,isChild=false){
			let i=c.$index;
			if(i<1)return;
			let rows;
			if(isChild){
				rows=navs.row.children;
			}else{
				rows=navs;
			}
			let t1=rows[i],t2=rows[i-1];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			this._wspost("{:url('record')}",{val:data,type:this.navsType},res=>{
				if(res.code>0){
					let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    rows.splice(i-1,2,t1,t2);
				}
			},false)
		},
		// 上下移动
		downRecord(navs,c,isChild=false){
			let i=c.$index;
			if(i===c.length){
				return;
			}
			let rows;
			if(isChild){
				rows=navs.row.children;
			}else{
				rows=navs;
			}
			let t1=rows[i+1],t2=rows[i];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			
			this._wspost("{:url('record')}",{val:data,type:this.navsType},res=>{
				if(res.code>0){
				    let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    rows.splice(i,2,t1,t2);
				}
			},false);
		},
	},
});
</script>
{/block}